<!--
 * @Author: fisher
 * @Date: 2024-02-21 14:27:05
 * @LastEditors: fisher luthor-li@qq.com
 * @LastEditTime: 2024-03-08 15:03:49
 * @FilePath: \allfront\src\modules\cloud\menu\index.vue
 * @Description: 
-->
<template>
  <div>
    <el-menu
      :default-active="currentMenu"
      class="el-menu-vertical-demo"
      :collapse="isCollapse"
      @select="handleSelect"
    >
      <el-menu-item index="1">
        <el-icon><location /></el-icon>
        <template #title>服务器设置</template>
      </el-menu-item>
      <el-menu-item index="2">
        <el-icon><icon-menu /></el-icon>
        <template #title>工程管理</template>
      </el-menu-item>
      <el-menu-item index="3">
        <el-icon><document /></el-icon>
        <template #title>实例管理</template>
      </el-menu-item>
      <el-menu-item index="4">
        <el-icon><setting /></el-icon>
        <template #title>文件资源</template>
      </el-menu-item>
      <el-icon class="expand" @click="isCollapse = !isCollapse"
        ><Expand
      /></el-icon>
    </el-menu>
  </div>
</template>

<script setup>
import { onMounted, ref, defineEmits } from 'vue';
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue';
const emit = defineEmits(['changeMenu']);
let currentMenu = ref('3');
const isCollapse = ref(false);

onMounted(() => {
  emit('changeMenu', currentMenu.value);
});
const handleSelect = a => {
  currentMenu.value = a;
  emit('changeMenu', currentMenu.value);
};
</script>
<style scoped>
.el-menu-vertical-demo {
  width: 70px;
  height: 100%;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
}
.expand {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 50px;
}
</style>
